<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <p></p>
    <span></span>

    <script>

        // 事件处理函数越多，性能越差
        // 无法给将来的对象绑定事件


        // 事件会冒泡 ---- 子元素的事件都会触发父元素的同类型事件


        // 事件委托
        //    原理：基于事件冒泡
        //    具体实现：把原本子元素的事件委托给父元素来绑定
        //    优势：大大的减少事件处理函数，优化性能；可以给将来的对象绑定事件

        var oUl = document.querySelector('ul');

        setTimeout(function () {
            var oLi = document.createElement('li');
            oLi.innerHTML = 4;
            oUl.appendChild(oLi);

        }, 0)

        // var oLis = document.querySelectorAll('li');

        // // 循环绑定事件
        // for (var i = 0; i < oLis.length; i++) {
        //     oLis[i].onclick = function () {
        //         console.log(666);
        //     }
        // }



        // 事件委托 ： 
        oUl.onclick = function () {
            console.log(666);
        }

    </script>

</body>

</html>